<template>
	<view class="my-container">
		<view class="login-title">
			<view class="bg"></view>
			<view class="logo">
				<image class="logo-img" src="/static/images/logo.png" mode="aspectFit"></image>
				<span>当下景</span>
			</view>
			<view class="title">活在当下，美景遍地</view>
			<view class="user-info">
				<view class="left">
					<image class="portrait-img" src="/static/images/portrait.png" mode="aspectFit"></image>
				</view>
				<view class="right">
					<view>{{ (userInfo?.name ? userInfo.name : "XM.4638629") + "，你好" }}</view>
					<view class="right-info">
						{{ userStatus == 1 ? "游客身份，请" : "当前已登录账号" }}
						<navigator v-if="userStatus === 1" class="login" url="/pages/login/index">
							<span>登录</span>
						</navigator>
					</view>
				</view>
			</view>
		<!-- 照片列表 -->
		<view class="person-picture">
			<view class="pics">
				<view class="pics-content">
					<view
						v-for="(pics, index) in pictureList"
						:key="index"
						:style="{ 'margin-left': !index ? '' : '10rpx' }"
						class="pic-row"
					>
						<view
							v-for="(pic, ind) in pics"
							:key="ind"
							class="pic-item"
							:style="{ 'padding-top': 1 / (pic.wh_radio - 0) * 100 + '%' }"
						>
							<span class="cover-div"></span>
							<image
								mode="aspectFit"
								class="pic-item-content"
								:src="pic.url || '#'"
							/>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="desc">
			<view class="frist">—  无未科技出品  —</view>
			<view class="second">可能很多人会用的小程序</view>
		</view>
	</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, Ref } from "vue";
import { appletUserInfo } from "../../service";
import { createToastComp } from "../../utils/comp";

const userInfo: Ref<null | Object> = ref(null);
const userStatus = ref(1); // 1表示游客；2表示登录用户；
const pictureList = ref([]);

const getUserApiInfo = async () => {
	const res: any = await appletUserInfo(uni.getStorageSync('token'));
	if (res.status !== "success") return createToastComp({ title: res.msg }, "none");
	if (res.data?.length == 1) {
		userInfo.value = res.data?.[0];
		uni.setStorageSync("userInfo", userInfo.value);
		userStatus.value = res.data?.length ? 2 : 1;
	}
};

// Vue 3的Composition API和uni-app生命周期一起使用的方式
const page = getCurrentPages()?.find(i => i.route === "pages/my/index");
page && (page.onShow = function() {
	getUserApiInfo();
});
</script>

<style lang="less" scoped>
.header-box {
  padding: 32rpx;
  padding-bottom: 64rpx;
  display: flex;
  align-items: center;
  color: #333;
}
.header-box .avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}
.header-box .btn {
  margin-left: 32rpx;
}
.header-box .r {
  margin-left: 32rpx;
  font-size: 28rpx;
}

page,view,image,input {
  display: block;
  box-sizing: border-box;
}

.container{
  min-height: 100%;
  overflow: hidden;
  overflow-y: hidden;
}

.asset {
  display: flex;
  border-top: 1px solid #eee;
  padding-top:20rpx;
  padding-bottom:20rpx;
}
.asset .item {
  display: flex;
  flex-direction: column;
  width:187rpx;
  text-align: center;
  font-size: 24rpx;
  line-height: 20px;
  color:#666;
}
.asset .item .amount {
  color:#333;
  font-size: 32rpx;
  padding-bottom: 10rpx;
}
.asset .right {
  border-left: 1px solid #eee;
}

.version {
  width:100vw;
	font-size: 24rpx;
	text-align: center;
  padding: 32rpx;
}
.to-authorize{
  padding: 0rpx;
  margin: 0rpx;
  background: none;
  border: none;
  height: auto;
  line-height: auto;
}
/* 绑定手机号 */
.bind-phone-number{
  margin: 20rpx;
  width: 100%;
}
/* flex重新构建菜单 */
.menu-item {
  width: 100vw;
  height: 104rpx;
  padding: 0 32rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-item .l {
  font-size:34rpx;
  color:#333;
  line-height:104rpx;
}
.menu-item .r {
  font-size:32rpx;
  color:#999;
  line-height:104rpx;
}
.menu-item .next {
  width: 40rpx;
  height: 40rpx;
}
.menu-item button {
  margin: 0;
}
.space {
  width: 100vw;
  height: 2rpx;
  background: #F4F5F9;
}
.line {
  width:718px;
  height:1px;
  background:#EEEEEE;
  margin-left: 32rpx;
}


.login-title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #ffffff;
}
.login-title .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 370rpx;
  background-color: #dad3f1;
}
.login-title .logo {
  display: flex;
  align-items: center;
  padding-top: 40rpx;
  z-index: 1;
}
.login-title .logo-img {
  width: 100rpx;
  height: 100rpx;
  display: inline-block;
  margin-right: 16rpx;
}
.login-title .title {
  margin-top: 40rpx;
  z-index: 1;
  background-color: rgb(191 191 191 / 30%);
  width: 75vw;
  text-align: center;
}

.user-info {
  width: 90vw;
  height: 250rpx;
  margin: 0 auto;
  margin-top: 70rpx;
  box-shadow: 0 5px 10px #e4e3e3;
  border-radius: 20rpx;
  z-index: 2000;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
}
.user-info .left {
  width: 140rpx;
  height: 140rpx;
  display: inline-block;
  margin-right: 40rpx;
}
.user-info .portrait-img {
  width: 100%;
  height: 100%;
}
.user-info .right {
  color: #060606;
  font-size: 15px;
  line-height: 61rpx;
}
.user-info .right .right-info {
  color: #756f6f;
  font-size: 14px;
}
.user-info .right .right-info .login {
  display: inline;
  color: #2a1be2;
}

.desc {
  display: flex;
  flex-direction: column;
  justify-items: center;
  margin-top: 100rpx;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #6d6d6d;
  text-align: center;
}
.desc .second {
  color: #cecece;
  font-size: 11px;
  letter-spacing: 10rpx;
}

/* 照片样式 */
.person-picture {
  color: #656f79;
  height: 100%;
  width: 100%;
  display: inline-block;
  overflow: auto;
  padding: 60rpx 20rpx 20rpx;
}
.person-picture .pics {
  margin-bottom: 20rpx;
  position: relative;
}
.pics-content {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
}
.pic-row {
  flex: 1;
}
.pic-item {
  margin-bottom: 10rpx;
  position: relative;
  cursor: pointer;
}
.pic-item .cover-div {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: opacity(0.3);
  background-color: #0f0186;
  border-radius: 14rpx;
}
.pic-item-content {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 14rpx;
}
.pic-item-content > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.pic-item-content > img .overlay {
  opacity: 0;
  transition: all 0.25s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  pointer-events: none;
}
.pic-item-content > img .overlay-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16rpx;
  background: linear-gradient(
    180deg,
    rgba(25, 27, 38, 0.56),
    rgba(25, 27, 38, 0)
  );
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8rpx;
  cursor: pointer;
  pointer-events: auto;
}
.left-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rpx;
  height: 32rpx;
  border-radius: 8rpx;
  border: 1rpx solid hsla(0, 0%, 100%, 0.4);
  background: hsla(0, 0%, 100%, 0.1);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-size: 20rpx;
}
.pic-item-content > img .overlay-bottom {
  position: absolute;
  display: flex;
  gap: 8rpx;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 16rpx;
  background: linear-gradient(
    180deg,
    rgba(25, 27, 38, 0),
    rgba(25, 27, 38, 0.56)
  );
  cursor: pointer;
  pointer-events: auto;
  color: hsla(0, 0%, 100%, 0.8);
}
</style>
